<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同城帮首页</title>
    <link rel="stylesheet" href=".././dist/css/scss1.css">
    <link rel="stylesheet" href="js/swiper-3.4.2.min.css">
    <script src="js/swiper-3.4.2.min.js"></script>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/baiduTemplate.js"></script>
    <script src="js/city.js"></script>
</head>
<body>
    <div id="box">
        <div id="header">
            <div id="city">
                <span>北京</span>
                <span class="bn"> <a href="javascript:;" onclick="fn()">[切换城市]</a></span>
                <span>|</span>
                <span><a href="">同城帮首页</a></span>
            </div>
            <div id="serve">
                <span><a href="#" onclick="" id="deng">登录</a></span>
                <span>|</span>
                <span><a href="#" onclick="" id="zhu">注册</a></span>
                <span>|</span>
                <span><a href="">我的订单</a></span>
                <span>|</span>
                <span><a href="">在线客服</a></span>
                <span>|</span>
                <span>
                    <select id="slec" style="border: none">
                        <option>客户服务</option>
                        <option>客户咨询</option>
                        <option>售后服务</option>
                    </select>
                </span>
                <span>|</span>
                <span><a href="">论坛</a></span>
                <span>|</span>
                <span><a href="">投诉建议</a></span>
            </div>
        </div>
        <div id="citypage">
            <h6>城市列表</h6> <button onclick="fn2()">X</button>
            <div id="min">
                <p>热门</p>
                <div id="hotlist"></div>
                <p>拼音</p>
                <div id="pinyin"></div>
                <div id="cityName"></div>
            </div>
        </div>
        <div id="login">
                <div><img src="image/login.png" alt=""><button id="dl">X</button></div>
                <span>账 号</span> <input type="text" id="log" placeholder="手机号/用户名/邮箱" name="username"><br>
                <div id="kong"></div>
                <span>密 码</span> <input type="text" id="pwd" placeholder="请输入您输入的密码" name="password">
            <br>
            <input type="checkbox" id="zd">自动登录
            <br>
            <button id="now">立即登陆</button>
            <br>
            <br>
            <p><a href="#" id="huan">注册新账号</a> | <a href="#">忘记密码？</a></p>
        </div>
        <div id="zhuce">
            <div><img src="image/login.png" alt=""><button id="d">X</button></div>
            <span>手 机 号</span><input type="text" id="loge" name="username"><br>
            <div id="tianjia"></div><br>
            <span>验 证 码</span><input type="text" id="yzm" name="mum"><span id="yz"></span> <a href="##" id="chg">换一张</a>
            <br>
            <br>
            <span>校 验 码</span><input type="text" id="xy" id="telnm"> <button id="gt">点击获取校验码</button>
            <br>
            <br>
            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span> <input type="text" id="psw" name="password">
            <br>
            <br>
            <button id="zc">马上注册</button>
            <p><input type="checkbox" name="" id="">同意条款 | 已有账号？<a href="#" id="nlog">立即登录</a></p>
        </div>
        <div id="bg">
        </div>
        <div id="banner">
            <div id="logo">
                <div id="img">
                    <img src="image/logo.png" alt="">
                </div>
                <div id="text">
                    <span><a href="">二手优品</a></span>
                    <span><a href="">二手优品</a></span>
                    <span><a href="">二手优品</a></span>
                    <span><a href="">二手优品</a></span>
                    <span><a href="">二手优品</a></span>
                    <span><a href="">二手优品</a></span>
                </div>
            </div>
            <div id="autoPlay">
                <div id="pone">
                    <ul>
                        <li><a><span class="a">修手机/修电脑</span></a><span class="glyphicon glyphicon-chevron-right"></span></li>
                        <li><a><span class="a">修手机/修电脑</span></a><span class="glyphicon glyphicon-chevron-right"></span></li>
                        <li><a><span class="a">修手机/修电脑</span></a><span class="glyphicon glyphicon-chevron-right"></span></li>
                    </ul>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="image/banner1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="image/banner2.png" alt=""></div>
                        <div class="swiper-slide"><img src="image/banner3.png" alt=""></div>
                        <div class="swiper-slide"><img src="image/banner4.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="image/banner5.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div id="pange" class="clear">
                <div><img src="image/手机换屏.jpg" alt=""></div>
                <div><img src="image/0元.png" alt=""></div>
                <div><img src="image/更换电池.jpg" alt=""></div>
                <div><img src="image/手机升级.jpg" alt=""></div>
            </div>
            <div id="shouji">
                <div id="top">
                    <div class="a">热门手机回收</div>
                    <div class="b">查看更多》》</div>
                </div>
                <div id="xiaomi">
                    <div class="log">
                        <img src="image/免费.png" alt="" class="one">
                    </div>
                    <div class="">
                        <img src="image/苹果5.jpg" alt="" class="tu">
                        <p>苹果ipone6</p>
                    </div>
                    <div class="">
                        <img src="image/苹果6.jpg" alt="" class="tu">
                        <p>苹果ipone6</p>
                    </div>
                    <div >
                        <img src="image/小米4..jpg" alt="" class="tu">
                        <p>苹果ipone6</p>
                    </div>
                    <div class="">
                        <img src="image/华为7.jpg" alt="" class="tu">
                        <p>苹果ipone6</p>
                    </div>
                    <div class="">
                        <img src="image/meizu.png" alt="" class="tu">
                        <p>苹果ipone6</p>
                    </div>
                </div>
            </div>
            <div id="teel">
                <div id="tp">
                    <div class="a">优品精选</div>
                    <div class="b">查看更多》》</div>
                </div>
                <div id="oppo">
                        <div class="lg">
                            <img src="image/质量保障.png" alt="" class="two">
                        </div>
                        <div class="">
                            <img src="image/R9s.png" alt="" class="tu2">
                            <p>oppoR9</p>
                            <span>￥3500</span>
                        </div>
                        <div class="">
                            <img src="image/m3.png" alt="" class="tu2">
                            <p>oppoR9</p>
                            <span>￥3500</span>
                        </div>
                        <div >
                            <img src="image/ip5.png" alt="" class="tu2">
                            <p>oppoR9</p>
                            <span>￥3500</span>
                        </div>
                        <div class="">
                            <img src="image/m6.png" alt="" class="tu2">
                            <p>oppoR9</p>
                            <span>￥3500</span>
                        </div>
                        <div class="">
                            <img src="image/6p.png" alt="" class="tu2">
                            <p>oppoR9</p>
                            <span>￥3500</span>
                        </div>
                    </div>
            </div>
            <div id="goShop">
                <h3>到店维修</h3>
            </div>
            <div id="food">
                <div id="xuanqu">
                    <div id="one">
                        <select id="ct">
                            <option>北京</option>
                        </select>
                    </div>
                    <div id="two">
                        <select id="qx">
                            <option>选择区县</option>
                        </select>
                    </div>
                    <div id="tree">
                        <input type="text" placeholder="请输入您的位置查找附近的商家"><button id="suo">搜索</button>
                    </div>
                </div>
                <div id="hov">
                    <span onclick="getAllMsg()"><a>默认排序</a></span>
                    <span onclick="chengJiaoLiang()"><a>按成交量</a></span>
                    <span onclick="renqipai()"><a>按人气</a></span>
                    <input type="checkbox">先行赔付
                    <div id="map"><img src="image/001.png" alt="">地图模式</div>
                </div>
                <div id="diaoqu">


                </div>
                <div id="ping">
                    <div id="tou">
                        <p>商家好评榜</p>
                    </div>
                    <div class="kuai">
                        <div class="lt">
                            <img src="image/c1.png" alt="" class="tu1">
                            <img src="image/b1.png" alt="" class="tu2">
                        </div>
                        <div class="rt">
                            <p><a href="#">联金诚维修中心</a>
                                <br>
                                <br>
                            121816条评论</p>
                        </div>
                    </div>
                    <div class="kuai">
                        <div class="lt">
                            <img src="image/c2.png" alt="" class="tu1">
                            <img src="image/b2.png" alt="" class="tu2">
                        </div>
                        <div class="rt">
                            <p><a href="#">联金诚维修中心</a>
                                <br>
                                <br>
                                121816条评论</p>
                        </div>
                    </div>
                    <div class="kuai">
                    <div class="lt">
                        <img src="image/c3.png" alt="" class="tu1">
                        <img src="image/b3.png" alt="" class="tu2">
                    </div>
                    <div class="rt">
                        <p><a href="#">联金诚维修中心</a>
                            <br>
                            <br>
                            121816条评论
                        </p>
                    </div>
                    </div>
                    <div class="kuai">
                        <div class="lt">
                            <img src="image/c4.png" alt="" class="tu1">
                            <img src="image/b4.png" alt="" class="tu2">
                        </div>
                        <div class="rt">
                            <p><a href="#">联金诚维修中心</a>
                                <br>
                                <br>
                                121816条评论</p>
                        </div>
                    </div>
                    <div class="kuai">
                        <div class="lt">
                            <img src="image/c5.png" alt="" class="tu1">
                            <img src="image/b5.png" alt="" class="tu2">
                        </div>
                        <div class="rt">
                            <p><a href="#">联金诚维修中心</a>
                                <br>
                                <br>
                                121816条评论</p>
                        </div>
                    </div>
                    <div class="kuai">
                        <div class="lt">
                            <img src="image/c6.png" alt="" class="tu1">
                            <img src="image/b6.png" alt="" class="tu2">
                        </div>
                        <div class="rt">
                            <p><a href="#">联金诚维修中心</a>
                                <br>
                                <br>
                                121816条评论</p>
                        </div>
                    </div>
                    <div class="kuai">
                        <div class="lt">
                            <img src="image/c7.png" alt="" class="tu1">
                            <img src="image/b7.png" alt="" class="tu2">
                        </div>
                        <div class="rt">
                            <p><a href="#">联金诚维修中心</a>
                                <br>
                                <br>
                                121816条评论</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script type="text/html" id="hot">
    <%for(var i=0;i<result.hotcity.length;i++){%>
        <a>
            <%=result.hotcity[i].name%>
        </a>
    <%}%>
</script>
<script type="text/html" id="py">
    <%for(var k in result.citylist){%>
    <a onclick="citys('<%=k%>')">
        <%=k%>
    </a>
    <%}%>
</script>
<script type="text/html" id="man">
    <%for(var i=0;i< arr.length;i++){%>
            <div class="biao">
                <img src=" <%=arr[i].shop_ico%> " alt="">
                <a href="#" class="shop_name"><%=arr[i].shop_name%></a>
                <span class="main">主营：<%=arr[i].main%></span><br>
                <span class="addr">地址：<%=arr[i].addr%></span><br>
                <span class="mobile">电话：<%=arr[i].mobile%></span>
                <span class="count">人气：<%=arr[i].count%></span>
                <span class="shop_visit">成交量：<%=arr[i].shop_visit%></span>
                <div class="story"><a href="ShoppingCar.html" onclick="aaaaa('<%=arr[i].qid%>')">进入店铺</a></div>
            </div>
    <%}%>
</script>
<script type="text/javascript">
    //轮播图
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay : 1000
    });
    //登录
    $("#now").on("click",function(){
        if($("#log").val()=="" || $("#pwd").val()==""){
            alert("不能为空")
        }else{
            denglu();
        }
    });
    function denglu() {
        $.ajax({
            type:"post",
            url:"http://localhost:2017/login",
            data:{
                username:$("#log").val(),
                password:$("#pwd").val()
            },
            success:function (res) {
                if(res=="该用户不存在，请先行注册!"){
                    $("#kong").html(res);
                    $("#now").attr("disabled","disabled")
                }else{
                    alert("登录成功！")
                }
            }
        })
    }
//    注册
    $("#zc").on("click",function(){
        $.ajax({
            type:"post",
            url:"http://localhost:2017/addmsage",
            data:{
                username:$("#loge").val(),
                num:$("#yzm").val(),
                telnm:$("#xy").val(),
                password:$("#psw").val()
            },
            success:function (res) {
                if(res=="该用户已存在，请先行登录!"){
                    $("#tianjia").html(res);
                    $("#zc").attr("disabled","disabled")
                }else{
                    alert("注册成功！")
                }
            }
        })
    })
//    点击事件
    $("#deng").on("click",function () {
        $("#login").toggle(900);
        $("#bg").toggle(900)
    })

    $("#huan").on("click",function () {
        $("#zhuce").show(),
        $("#login").hide()

    })
    $("#zhu").on("click",function () {
        $("#zhuce").toggle(100)
        $("#bg").toggle(100)
    })

    $("#nlog").on("click",function (){
        $("#login").show()
        $("#zhuce").hide()
    })
    $("#dl").on("click",function (){
        $("#bg").hide()
        $("#login").hide()
    })
    $("#d").on("click",function (){
        $("#bg").hide()
        $("#zhuce").hide()
    })

//    获取数据 默认排序
    getAllMsg();
    function getAllMsg() {
        var obj={}
        $.ajax({
            type:"get",
            url:"http://localhost:2017/getmsgshop",
            success:function (res) {
                console.log(res)
                 obj.arr=res;
                $("#diaoqu").html(baidu.template("man",obj))
            }
        })
    }
    //成交量排序
    chengJiaoLiang();
    function chengJiaoLiang() {
        var obj={}
        $.ajax({
            type:"get",
            url:"http://localhost:2017/getmsgshop",
            success:function (res) {
                console.log(res)
                obj.arr=res;
                function compare(property){
                    return function(a,b){
                        var value1 = a[property];
                        var value2 = b[property];
                        return value2 - value1;
                    }
                }
                obj.arr.sort(compare('shop_visit'));
                console.log(obj.arr);
                $("#diaoqu").html(baidu.template("man",obj));
                $("count").hide();
            }
        })
    }
//    人气排序
    renqipai();
    function renqipai() {
        var obj={}
        $.ajax({
            type:"get",
            url:"http://localhost:2017/getmsgshop",
            success:function (res) {
                console.log(res)
                obj.arr=res;
                function compare(property){
                    return function(a,b){
                        var value1 = a[property];
                        var value2 = b[property];
                        return value2 - value1;
                    }
                }
                obj.arr.sort(compare('count'));
                console.log(obj.arr);
                $("#diaoqu").html(baidu.template("man",obj));
                $("shop_visit").show();
            }
        })
    }
function  aaaaa(id) {
    localStorage.shop = id
}
</script>
</html>